<template>
  <div class="wrap">
    <div class="title">
      上海市工业技术学校
    </div>
    <div class="title" style="margin-top: 10%">
      智慧校园综合管理平台
    </div>
    <div class="inputArea">
      <Form>
        <field
          v-model="account"
          label=""
          left-icon="manager"
          :rules="[{ required: true, message: '请输入账号' }]"
        />
        <!-- { pattern, message: '请输入816密码' } -->
        <field
          v-model="password"
          type="password"
          label=""
          left-icon="lock"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <div style="display: flex;align-items: flex-end;">
          <field
            v-model="captcha"
            label=""
            left-icon="lock"
            class="speceil"
            style="flex: 1;"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
          </field>
          <div @click="imgData++" class="imgBox">
            <img
              style="width: 100%;height: 100%;"
              :src="
                VUE_APP_BASE_API + '/user/ucenter/verifyCode?key=' + imgData
              "
              alt=""
            />
          </div>
        </div>
        <div class="checkBox">
          <checkbox v-model="checked" shape="square">记住密码</checkbox>
        </div>
        <div class="btn">
          <van-button type="primary" @click="login">立即登录</van-button>
        </div>
      </Form>
    </div>
    <!-- <div class="checkBox">
      <checkbox v-model="checked" shape="square">记住密码</checkbox>
    </div>
    <div class="btn">
      <van-button native-type="submit" type="primary" @click="login"
        >立即登录</van-button
      >
    </div> -->
  </div>
</template>

<script>
import { Form, Field, Button, Checkbox, Toast } from "vant";
import { login, preLogin } from "@/api/user";
import md5 from "md5";

export default {
  components: {
    Form,
    Field,
    VanButton: Button,
    Checkbox
  },
  data() {
    return {
      // pattern: /\w{6,16}/,
      checked: !!localStorage.getItem("password"),
      account: "",
      password: "",
      captcha: "",
      imgData: 0,
      code: '',
      state: ''
    };
  },
  computed: {
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API;
    }
  },
  created() {
    const CORPID = 'wx1b07fd672978e23e'; //appid参数
    const REDIRECT_URI = encodeURI('http://dc.shgyjs.cn:1223/#/home/index');  //redirect_uri参数
    const AGENTID =  '1000012'; //agentid 参数
    const searchParams = new URLSearchParams(window.location.search);
    const code = (this.$route.query.code) || (searchParams.get('code'))
    const state = (this.$route.query.state) || (searchParams.get('state'))
    this.code = code
    this.state = state
    console.log(code, state, 'code, state')
    // 路由上没有code的情况下，进行企业微信授权
    // if (!code) {
    //   const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_privateinfo&state=${state}&agentid=${AGENTID}#wechat_redirect`;
    //   console.log(authUrl, 'authUrl')
    //   window.location.href = authUrl;
    // }
    sessionStorage.setItem("token","f2d7e361-08b4-4629-add9-e323a56fdd1b");
    
    // 存在code且不存在token的情况下走登录的接口
    // if (code && (token.value == null || token.value == 'null')) {
    //   userStore.resetUserStore()
    //   login({
    //     code: code,
    //     state: state,
    //   }).then((res) => {
    //     userStore.setToken(res.token)
    //   })
    // }

    // sessionStorage.removeItem("token");
    this.autoLogin();
    this.imgData = new Date();
  },
  methods: {
    autoLogin() {
      let account = localStorage.getItem("account");
      let password = localStorage.getItem("password");
      if (account && password) {
        this.account = account;
        this.password = password;
        // this.login();
      }
    },
    async login() {
      if (!this.account || !this.password || !this.captcha) return;
      // this.$router.push("/home/index");
      // return;
      let pcUserInfo;
      // try {
      let { code, data } = await preLogin(this.account);
      if (code !== 0) return;
      // sessionStorage.setItem("pcUserInfo", JSON.stringify(data[0]));
      pcUserInfo = data[0];

      let res = await login({
        account: this.account,
        // password:
        //   this.randomString(3) + md5(this.password) + this.randomString(3),
        password:
          this.$base.randomString(3) +
          md5(this.password) +
          this.$base.randomString(3),
        verifyCode: this.captcha,
        userNo: pcUserInfo?.userNo,
        tenantNo: pcUserInfo?.tenantNo
      });
      if (res.code === 0) {
        pcUserInfo.account = this.account;
        pcUserInfo.token = res.data;
        sessionStorage.setItem("pcUserInfo", JSON.stringify(pcUserInfo));
        // sessionStorage.setItem(
        //   "lwUserInfo",
        //   JSON.stringify(res.result.userInfoEntity)
        // );
        sessionStorage.setItem("account", this.account);
        sessionStorage.setItem("mobile", this.account);
        sessionStorage.setItem("token", res.data);
        // sessionStorage.setItem("roleName", res.result.roleName);
        if (this.checked) {
          localStorage.setItem("account", this.account);
          localStorage.setItem("password", this.password);
        } else {
          localStorage.removeItem("account");
          localStorage.removeItem("password");
        }
        this.$router.push("/home/index");
      } else {
        Toast.fail(res.msg);
        this.imgData++;
      }
      // }
      //  finally {
      //   this.$router.push("/home/index");
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/Login/BG.png") no-repeat top;
  background-size: 100% 100%;
  padding: 20% 10%;
  box-sizing: border-box;
  .title {
    margin-top: 10%;
    font-size: 20px;
    font-family: PingFang SC Bold, PingFang SC Bold-Bold;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 3px rgba(34, 35, 36, 0.9);
  }
  .inputArea {
    .van-cell {
      margin-top: 10%;
      background: url("../../assets/images/Login/inputBg.png") no-repeat center;
      background-size: 100% 100%;
      overflow: initial;
      /deep/ .van-field__label {
        width: 30px;
        color: #1e9bfa;
      }
      /deep/ .van-field__control {
        background-color: white;
        color: #1e9bfa;
      }
      /deep/ .van-icon {
        color: #1e9bfa;
      }
      /deep/ .van-field__value {
        position: relative;
        overflow: initial;
      }
      /deep/ .van-field__error-message {
        position: absolute;
        top: 120%;
      }
    }
    .speceil {
      border-radius: 50px;
    }
    .imgBox {
      flex: 1;
      height: 44px;
      background-size: contain;
      background-repeat: no-repeat;
      // background-position: center;
    }
  }
  .checkBox {
    margin-top: 5%;
    .van-checkbox {
      font-size: 15px;
      /deep/ .van-checkbox__label {
        color: #ffffff;
        text-shadow: 0px 2px 1px rgba(49, 74, 139, 0.6);
      }
      /deep/ .van-checkbox__icon .van-icon {
        border: 2px solid #ffffff;
        box-shadow: 0px 2px 1px rgba(49, 74, 139, 0.6);
      }
    }
  }
  .btn {
    margin-top: 35%;
    .van-button--normal {
      font-size: 18px;
      font-family: PingFang SC Bold, PingFang SC Bold-Bold;
      font-weight: 500;
      width: 100%;
      background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
      box-shadow: 0px 1px 2px 0px #226eaf;
      border: none;
      border-radius: 20px;
    }
  }
}
</style>
